<template>
  <div class="contaniner">
    <!-- 我的频道 -->
    <van-cell
      class="maChannels"
      :border="false"
    >
      <div slot="title">我的频道</div>
      <van-button
        round
        @click="isShowEidt=!isShowEidt"
      >{{isShowEidt? '完成':'编辑'}}</van-button>
    </van-cell>
    <van-grid
      :column-num="4"
      class="my-grid"
    >
      <van-grid-item
        @click="removeChannels(index,value)"
        v-for="(value,index) in myChannels"
        :key="value.id"
      >
        <div
          slot="icon"
          v-if="isShowEidt && !fixed.includes(value.id)"
        >
          <van-icon name="clear" />
        </div>
        <div
          slot="text"
          :class="{active:index===active}"
        >{{value.name}}</div>
      </van-grid-item>
    </van-grid>
    <!-- 推荐频道 -->
    <van-cell
      class="
          recommendChannels"
      :border="false"
    >
      <div slot="title">推荐频道</div>
    </van-cell>
    <van-grid
      :column-num="4"
      class="recommend-grid"
    >
      <van-grid-item
        @click="addChannels(index,value)"
        v-for="(value,index) in recommendChannels"
        :key="value.id"
      >
        <div slot="text">
          <van-icon name="plus" />{{value.name}}</div>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getAllChannels, setMyChannels, deleteMyChannels } from '@/api/article.js'
import { setItem } from '@/utils/storage.js'
export default {
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannels: [],
      isShowEidt: false,
      fixed: [0]
    }
  },
  created () {
    this.getRecommendChannels()
  },
  methods: {
    async getRecommendChannels () {
      try {
        const { data: res } = await getAllChannels()
        this.allChannels = res.data.channels
      } catch (err) {
        this.$toast('获取频道失败')
      }
    },
    // 添加频道
    async addChannels (i, value) {
      this.myChannels.push(this.recommendChannels[i])
      if (this.user) {
        try {
          const { data } = await setMyChannels({ id: value.id, seq: this.myChannels.length })
          console.log(data)
        } catch (err) {
          console.log(err)
        }
      } else {
        setItem('myChannels', this.myChannels)
      }
    },
    // 删除频道
    async   removeChannels (i, value) {
      if (this.isShowEidt) {
        if (i <= this.active) {
          this.$emit('active', true)
        }
        if (this.fixed.includes(value.id)) {
          return
        }
        this.myChannels.splice(i, 1)
        if (this.user) {
          try {
            const data = await deleteMyChannels(value.id)
            console.log(data)
          } catch (err) {
            console.log(err)
          }
        } else {
          setItem('myChannels', this.myChannels)
        }
      } else {
        this.$emit('active', false, i)
      }
    }
  },
  computed: {
    recommendChannels () {
      return this.allChannels.filter(item => {
        return !this.myChannels.find((it) => {
          return it.id === item.id
        })
      })
    },
    ...mapState(['user'])
  }
}
</script>
<style lang="less" scoped>
.contaniner {
  padding-top: 88px;
}
/deep/ .maChannels {
  div {
    font-size: 32px;
    color: #6b6b6b;
  }
  .van-button {
    padding: 0;
    width: 104px;
    height: 48px;
    border: 1px solid #f85959;
    .van-button__content {
      width: 100%;
      span {
        color: #f85959;
        font-size: 26px;
      }
    }
  }
}
/deep/ .van-grid-item {
  border-radius: 6px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  .van-grid-item__content--center {
    width: 160px;
    height: 86px;
    background: #f4f5f6;
    padding: 0;
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #222222;
      font-size: 28px;
      i {
        margin-right: 6px;
      }
    }
  }
}
.my-grid {
  .van-icon {
    color: #a4a4a4;
    position: absolute;
    top: -36px;
    right: -98px;
    z-index: 5;
  }
}
.active {
  color: #f85959 !important;
}
</style>
